<template>
	<view class="evaluate_list_container">
		<view class="p_16 bc_fff" style="border-radius: 0 0 16rpx 16rpx;">
			<view class="fx aic">
				<text class="fz_16 fb">评分</text>
				<text class="ml_12" style="color:#E6502C">{{topData.goodEvaluateRate||0}}%</text>
				<text>好评率</text>
			</view>
			<view class="mt_13">
				<u-rate gutter="16" :count="5" :value="topData.evaluateScore||0" size="48rpx" inactiveColor="#ccc"
					activeColor="#F08519" readonly></u-rate>
			</view>
			<view class="mt_16 fx grid_8">
				<view class="ptb_4 plr_8 br_2 bo_1 boc_grey fz_12" @click="handleFilter()">
					全部 {{topData.allCount||0}}
				</view>
				<view class="ptb_4 plr_8 br_2 bo_1 boc_grey fz_12" @click="handleFilter(1)">
					好评 {{topData.goodEvaluateCount||0}}
				</view>
				<view class="ptb_4 plr_8 br_2 bo_1 boc_grey fz_12" @click="handleFilter(2)">
					中评 {{topData.mediumEvaluateCount||0}}
				</view>
				<view class="ptb_4 plr_8 br_2 bo_1 boc_grey fz_12" @click="handleFilter(3)">
					差评 {{topData.badEvaluateCount||0}}
				</view>
			</view>
		</view>
		<view class="p_12 bc_fff mt_8" v-for="item,index in dataList" :key="index">
			<Evaluate :data="item" />
		</view>
		<view class="pt_16">
			<u-loadmore :status="loadingStatus" />
		</view>
	</view>
</template>
<script>
	import Evaluate from '@/components/goods/Evaluate.vue'
	import dataMixin from '@/mixins/data.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [dataMixin],
		components: {
			Evaluate
		},
		data() {
			return {
				dataList: [],
				listUrl: '/goods/api/productEvaluate/page',
				productId: null,
				topData: {}, // 头部信息
				params: {
					productId: null,
				},
				noHideLoading: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.productId = options.id
				this.$set(this.params, 'productId', options.id)
				this.getAllData()
			} else {
				this.$utils.showToast('商品不存在', 1500, 1)
			}
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getData(true), this.getTopData()]).then(res => {
					uni.hideLoading()
				})
			},
			getTopData() {
				return new Promise(resolve => {
					api.get('/goods/api/productEvaluate/data/' + this.productId, {}, {
						noHideLoading: true
					}).then(res => {
						this.topData = res.data
					}).finally(() => {
						resolve()
					})
				})

			},
			handleFilter(evaluateStatus) {
				if (!evaluateStatus) {
					this.$delete(this.params, 'evaluateStatus')
				} else {
					this.$set(this.params, 'evaluateStatus', evaluateStatus)
				}
				this.noHideLoading = false
				this.getData(true)
			}
		}
	}
</script>
<style></style>